<template>
  <v-card
          class="mx-auto"
          max-width="375"
          tile
          flexd
  >
    <v-toolbar
            color="cyan"
            dark
    >

      <v-toolbar-title>
        <v-icon
                dense
                color="white darken-2"
                @click="backToBook"
        >
          mdi-arrow-left-circle
        </v-icon>
        {{wordbook}}</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
    </v-toolbar>

    <v-list dense>
      <v-subheader>word</v-subheader>
      <v-list-item-group
              v-model="selectedItem"
              color="grey"
      >
        <v-list-item
                v-for="(item, i) in words"
                :key="i"
        >
          <v-list-item-content>
            <v-list-item-title v-text="i+1 + '. ' + item.word"></v-list-item-title>
          </v-list-item-content>
          <v-list-item-content>
            <v-list-item-title v-text="item.chinese"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>

    <br>

    <div class="text-center">
      <v-btn
              class="ma-2"
              elevation="2"
              @click="loadMoreWord"
              :disabled="load"
      >
        <span>{{loadTitle}}</span>
      </v-btn>
    </div>

    <v-btn
            class="btn-toolbar"
            fab
            small
            @click="goTop"
    ><v-icon>mdi-arrow-up</v-icon></v-btn>
    <br>
    <br>
    <br>
  </v-card>



</template>

<script>

  import {getWordData} from '../../../../network/word'

  export default {
    name: "Wordlist",
    data: () => ({
      start: 0,
      end: 100,
      load: false,
      toLoad: false,
      loadTitle: "正在加载..",
      wordbook: "单词本",
      selectedItem: 1,
      words: [],
    }),
    methods: {
      backToBook(){
        this.$router.replace("/wordbook")
      },
      loadMoreWord(){
        if (this.toLoad) return
        //按钮不可用
        this.load = true
        // 增加条数
        this.end *= 2
        //请求数据
        getWordData(this.wordbook,this.start,this.end).then(res => {
          console.log(res.data);
          this.words = res.data.words
          // 成功后取消按钮不可用
          this.load = false
          // 如果加载完毕
          if (res.data.Toload){
            this.toLoad = res.data.Toload
            this.loadTitle = "加载完毕"
          }
        })
      },
      goTop(){
        document.body.scrollTop = 0
        document.documentElement.scrollTop = 0
      }
    },
    created(){
      /**
       * 请求数据
       */
      //当前分类
      this.wordbook = this.$store.state.wordbook

      //请求数据
      getWordData(this.wordbook,this.start,this.end).then(res => {
        this.words = res.data.words
        this.loadTitle = "加载更多"
      })

    },

  }
</script>

<style scoped>
  .btn-toolbar{
    position: fixed;
    top: 80%;
    left: 85%;
  }
</style>